<template>
	<view class="content">
		<!--title-->
		<view class="title">
			<u-tabs :list="titleList" active-color="#0DA297" :is-scroll="false" :current="current"
				@change="handleChange"></u-tabs>
				<scroll-view scroll-x="true" class="list-scroll">
					<view class="button-tickets">
				
						<view class="button-tickets-list"
							:style="{color: currentIndex == item.id ? '#0DA297':'#333333',background:currentIndex == item.id ? '#CDF6F3':'#EAEAEA' }"
							v-for="(item,index) in currentList" :key="index" @click="currentBtn(item.id)">
							{{item.title}}
						</view>
				
					</view>
				</scroll-view>
		</view>
		<!--list-->
		<view class="list">
			<!--card-->
			<view class="list-item" v-show="current==0">
				<view v-for="(item,i) in cardList" :key="i" class="card-list" @click="handleCardClick(i)">
					<image class="card-img" mode="widthFix" :src="item.img"></image>
					<template v-if="item.cal_type==1">
						<view class="card-time special-card-time">{{item.validity}}</view>
					</template>
					<template v-else>
						<view class="card-type"><text></text><text>{{item.descript}}</text></view>
						<view class="card-name">{{item.cal_name}}</view>
						<view class="card-time">{{item.validity}}</view>
					</template>
				</view>
				<no-data :src="noDataSrc" :txt="'暂无卡包'" v-if="!cardList.length"></no-data>
			</view>
			<!--ticket-->
			<view class="list-item" v-show="current==1">
				

				<view class="ticket-list" v-for="(item,i) in couponList" :key="i">
					<image class="ticket-img" mode="scaleToFill" :src="item.img"></image>
					<view class="ticket-title" v-if="item.descript">{{item.descript}}</view>
					<view class="ticket-center" v-if="item.tips">{{item.tips}}</view>
					<view class="ticket-money" v-if="item.title"><text>{{item.title}}</text><text>{{item.unit}}</text>
					</view>
					<view class="ticket-time" v-if="item.validity">{{item.validity}}</view>
					<!-- <view class="ticket-button"  @click="handleUseClick">使用</view> -->
				</view>
				<no-data :src="noDataSrc" :txt="'暂无票券'" v-if="!couponList.length"></no-data>
			</view>
		</view>
		<view class="bottom-safe-area"></view>

		<common-drag />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				//tabs
				titleList: [{
					name: '我的卡包'
				}, {
					name: '我的票券'
				}],
				current: 0,
				currentIndex: 1,
				currentList: [],
				//card
				cardList: [],
				//coupon
				couponList: [],
				noDataSrc: this.$noData,
			}
		},
		onLoad() {
			this.cardTypeList();
			this.getListRequest();
		},
		methods: {
			// current
			currentBtn(index) {
				if(this.current == 0){
					this.currentIndex = index;
					this.$u.api.getCardList({type: this.currentIndex}).then(res => {
						this.cardList = res.data ? res.data : [];
					}).catch();
				}else{
				this.currentIndex = index;
				this.$u.api.getCouponList({
					type: this.currentIndex
				}).then(res => {
					this.couponList = res.data ? res.data : [];
				}).catch();	
				}
				
			},
			//tabs
			handleChange(index) {
				this.current = index;
				this.getListRequest();
			},
			getListRequest() {
				if (this.current == 0) {
					//卡
					this.$u.api.getCardList({type: this.currentIndex}).then(res => {
						this.cardList = res.data ? res.data : [];
					}).catch();
				} else {
					//券
					this.$u.api.getCouponList({
						type: this.currentIndex
					}).then(res => {
						this.couponList = res.data ? res.data : [];
					}).catch();
				}
			},
			handleUseClick() {
				console.log(1);
			},
			handleCardClick(i) {
				if (this.cardList[i].cal_type == 1) {
					//会员
					uni.navigateTo({
						url: '/pages/member/benefits?state=2&id=' + this.cardList[i].cal_id
					});
				}else if(this.cardList[i].cal_type == 9)  {
					//会员
					this.$utils.jumpWebview('https://api.cd1a.cn/h5/app_li/#/memberrules');	
				} else {
					//月卡
					uni.navigateTo({
						url: '/pages/member/benefits?state=1&id=' + this.cardList[i].cal_id
					});
				}
			},
			cardTypeList() {
				this.$u.api.getCouponType().then(res => {
					this.currentList = res.data;
					this.currentIndex = res.data[0].id;
					console.log(res, 'res');
				}).catch();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		position: fixed;
		left: 0;
		;
		top: 0;
		width: 100%;
		z-index: 999;
	}

	.list {
		padding: 0 30rpx;
		margin-top: 200rpx;
	}

	.card-list {
		position: relative;
		margin: 20rpx 0 30rpx;
	}

	.card-img {
		width: 100%;
		height: 400rpx;
		display: block;
	}

	.card-type {
		position: absolute;
		right: 40rpx;
		top: 110rpx;
		line-height: 1;
	}

	.card-type text:nth-child(1) {
		font-size: 30rpx;
		color: #9B8442;

	}

	.card-type text:nth-child(2) {
		font-size: 28rpx;
		color: #fff;

	}

	.card-time {
		position: absolute;
		left: 30rpx;
		bottom: 30rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #fff;
	}

	.card-name {
		position: absolute;
		left: 30rpx;
		bottom: 90rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #fff;
	}

	.card-list .special-card-type {
		font-size: 60rpx;
		color: #fff;
	}

	.card-list .special-card-time {
		color: #998443;
	}

	.ticket-list {
		position: relative;
		margin-bottom: 30rpx;
	}

	.ticket-img {
		width: 100%;
		height: 200rpx;
		display: block;
	}

	.ticket-title {
		position: absolute;
		left: 30rpx;
		top: 30rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #FFFFFF;
	}

	.ticket-center {
		position: absolute;
		left: 30rpx;
		bottom: 80rpx;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.ticket-time {
		position: absolute;
		left: 30rpx;
		bottom: 30rpx;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.ticket-money {
		position: absolute;
		right: 30rpx;
		top: 20rpx;
	}

	.ticket-button {
		position: absolute;
		right: 30rpx;
		bottom: 26rpx;
		width: 120rpx;
		border: 2px solid #fff;
		text-align: center;
		padding: 6rpx 0;
		color: #fff;
		line-height: 1;
		border-radius: 22rpx;
		font-size: 28rpx;
	}

	.ticket-money text:nth-child(1) {
		font-size: 70rpx;
		font-weight: 600;
		color: #fff;
		line-height: 1;

	}

	.ticket-money text:nth-child(2) {

		font-size: 28rpx;
		color: #fff;
	}

	.button-tickets {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	.list-scroll {
		background-color: #fff;
		padding: 20rpx 0;
	}
	.button-tickets-list {
		padding: 0 20rpx;
		height: 60rpx;
		background: #EAEAEA;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		opacity: 1;
		text-align: center;
		line-height: 60rpx;
	}
</style>
<style>
	page {
		background: #F4F4F4;
	}
</style>